{% extends 'public/layout.html' %}

{% block load_css %}
    <link href="/static/font-awesome/css/font-awesome.css" rel="stylesheet">
    <link href="/static/css/plugins/iCheck/custom.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="/static/css/plugins/chosen/bootstrap-chosen.css">
    <link rel="stylesheet" type="text/css" href="/static/css/bootstrap-select.css">
<style>

 .pop-box {
        z-index: 9999999999999999; /*这个数值要足够大，才能够显示在最上层*/
        margin-bottom: 20%;
        display: none;
        position: fixed;
        top: 20px;
        right: 20px;
        margin-bottom: 20px;
        opacity: 0.8;
        background-color: black;
    }

    .pop-box-body {
        clear: both;
        margin: 20px;
        padding: 20px;
        background-color: darkgreen;
    }

    #divCover {
        position: fixed;
        z-index: 9999;
        top: 0px;
        left: 0px;
        display: none;
        width: 100%;
        height: 100%;
        opacity: 0.7;
        background-color: navajowhite;
    }

</style>
{% endblock %}

{% block load_js %}
	<script type="text/javascript" src="/static/js/bootstrap-select.js"></script>
	<script type="text/javascript" src="/static/js/plugins/chosen/chosen.jquery.js"></script>
	<script type="text/javascript" src="/static/js/datepicker/js/laydate.js"></script>
	<script type="text/javascript">
	!function(){
		laydate.skin('molv');//切换皮肤，请查看skins下面皮肤库
		laydate({elem: '#demo'});//绑定元素
		}();
		//自定义日期格式
		laydate({
			elem: '#test1',
			format: 'YYYY年MM月DD日',
			festival: true, //显示节日
			choose: function(datas){ //选择日期完毕的回调
				alert('得到：'+datas);
			}
		});

		laydate({
			elem: '#hello3',
			min: laydate.now(-1), //-1代表昨天，-2代表前天，以此类推
			max: laydate.now(+1) //+1代表明天，+2代表后天，以此类推
		});
	</script>

	<script type="text/javascript">
		!function(){
			laydate.skin('molv');//切换皮肤，请查看skins下面皮肤库
			laydate({elem: '#demo'});//绑定元素
		}();

		//日期范围限制
		var start = {
			elem: '#stime',
			format: 'YYYY-MM-DD  hh:mm:ss',
			min: '2017-01-10', //设定最小日期为当前日期
			max: '2099-06-16', //最大日期
			istime: true,
			istoday: false,
			choose: function(datas){
				 end.min = datas; //开始日选好后，重置结束日的最小日期
				 end.start = datas //将结束日的初始值设定为开始日
			}
		};

		var end = {
			elem: '#etime',
			format: 'YYYY-MM-DD  hh:mm:ss',
			min: '2016-08-10',
			max: '2099-06-16',
			istime: true,
			istoday: false,
			choose: function(datas){
				start.max = datas; //结束日选好后，充值开始日的最大日期
			}
		};
		laydate(start);
		laydate(end);

		//自定义日期格式
		laydate({
			elem: '#test1',
			format: 'YYYY年MM月DD日',
			festival: true, //显示节日
			choose: function(datas){ //选择日期完毕的回调
				alert('得到：'+datas);
			}
		});

		laydate({
			elem: '#hello3',
			min: laydate.now(-1), //-1代表昨天，-2代表前天，以此类推
			max: laydate.now(+1) //+1代表明天，+2代表后天，以此类推
		});
	</script>

	<script>
	 $(".chosen-select").chosen({no_results_text: "nothing"});
	</script>

{% endblock %}

{% block mbx %}
    <div class="row wrapper border-bottom white-bg page-heading">
        <div class="col-sm-10">
            <h2></h2>
            <ol class="breadcrumb">
                <li>
                    <a href="{% url 'index' %}">仪表盘</a>
                </li>

                <li>
                    <a>监控中心</a>
                </li>


                <li class="active">
                    <strong>MySQL慢查询</strong>
                </li>

            </ol>
        </div>
        <div class="col-sm-2">
        </div>
    </div>
{% endblock %}

{% block body %}

<div class="wrapper wrapper-content animated fadeInRight">
        <div class="row">
            <form name="asset_form" id="asset_form">
                <div class="col-sm-12">
                    <div class="ibox float-e-margins">
                        <div class="ibox-title">
                            <h5>慢查询分析</h5>
                            <div class="ibox-tools">
                                <a class="collapse-link">
                                    <i class="fa fa-chevron-up"></i>
                                </a>
                                <a class="close-link">
                                    <i class="fa fa-times"></i>
                                </a>
                            </div>
                        </div>


                        <div class="ibox-content" style="overflow:scroll;white-space : nowrap">

                                <input name="id" value="{{id}}" type="hidden">

                                <div class="form-group"><label class="col-md-2 control-label">{{mys.dbname}}慢查询</label>
                                    </br></br>
                                    <div class="col-md-9">
                                        <div class="form-group">
                                            <div class=" col-sm-8 col-lg-8 "><b>时间</b>
                                                <input class="laydate-icon" name="stime" id="stime" value="{{stime}}" style="width:auto; height:30px;">-
                                                <input class="laydate-icon" name="etime" id="etime" value="{{etime}}" style="width:auto; height:30px;"><b>排序</b>
                                                <select class="selectpicker" name="type" id="type" style="width:auto; height:30px;">
                                                    {% for type_tuple in type_list %}
                                                        {% if c_type == type_tuple.0  %}
                                                            <option value="{{type_tuple.0}}" selected>{{type_tuple.1}}</option>
                                                        {% else %}
                                                            <option value="{{type_tuple.0}}" >{{type_tuple.1}}</option>
                                                        {% endif %}
                                                    {% endfor %}
                                                </select>
                                                <select class="selectpicker" name="sequence" id="sequence" style="width:auto; height:30px;">
                                                    {% for sequence_tuple in sequence_list %}
                                                        {% if c_sequence == sequence_tuple.0  %}
                                                            <option value="{{sequence_tuple.0}}" selected>{{sequence_tuple.1}}</option>
                                                        {% else %}
                                                            <option value="{{sequence_tuple.0}}">{{sequence_tuple.1}}</option>
                                                        {% endif %}
                                                    {% endfor %}

                                                </select>
                                                <button type="button" class="btn btn-sm btn-primary" data-toggle="modal" onclick="change_info()">
                                                    搜索
                                                </button>

                                            </div>
                                        </div>
                                    </div>
                                </div>
                                </br>
                                <div class="hr-line-dashed"></div>
                                <table class="table table-striped table-bordered table-hover  dataTable no-footer" style="font-size: 8px">
                                    <thead>
                                    <tr>
                                        <th class="text-center"></th>
                                        <th class="text-center"></th>
                                        <th class="text-center">SQL</th>
                                        <th class="text-center"></th>
                                        <th class="text-center"></th>
                                        <th class="text-center"></th>
                                        <th class="text-center">查询时间</th>
                                        <th class="text-center"></th>
                                        <th class="text-center"></th>
                                        <th class="text-center">锁等待时间</th>
                                        <th class="text-center"></th>
                                        <th class="text-center"></th>
                                    </tr>
                                    <tr>
                                        <th class="text-center">校验值</th>
                                        <th class="text-center">抽象语句</th>
                                        <th class="text-center">数据库</th>
                                        <th class="text-center">用户</th>
                                        <th class="text-center">最近时间</th>
                                        <th class="text-center">次数</th>
                                        <th class="text-center">平均</th>
                                        <th class="text-center">最小</th>
                                        <th class="text-center">最大</th>
                                        <th class="text-center">总计</th>
                                        <th class="text-center">最小</th>
                                        <th class="text-center">最大</th>
                                    </tr>



                                    </thead>
                                    <tbody>
                                    {% for monitor_obj in result %}
                                        <tr>
                                            <td class="text-center"><a class="active" href="{% url 'mysql_slowlog_detail' %}?checksum={{ monitor_obj.checksum }}&dname={{mys.dbname}}">{{ monitor_obj.checksum }}</a></td>
                                            <td class="text-center" >
                                                      <button id="{{ monitor_obj.checksum }}" onmouseover="popupDiv(this,'{{monitor_obj.fingerprint}}','{{ monitor_obj.checksum }}')" onclick="return false;" onmouseout="popupDivOut('{{ monitor_obj.checksum }}')">详情</button>
                                            </td>
                                            <td class="text-center">{{ monitor_obj.db_max }}</td>
                                            <td class="text-center">{{ monitor_obj.user_max }}</td>
                                            <td class="text-center">{{ monitor_obj.last_seen|date:"Y-m-d H:i:s" }}</td>
                                            <td class="text-center">{{ monitor_obj.ts_cnt|default_if_none:"" }}</td>
                                            <td class="text-center">{{ monitor_obj.Query_time_avg|floatformat:3 }}</td>
                                            <td class="text-center">{{ monitor_obj.Query_time_min|floatformat:3 }}</td>
                                            <td class="text-center">{{ monitor_obj.Query_time_max|floatformat:3 }}</td>
                                            <td class="text-center">{{ monitor_obj.Lock_time_sum|floatformat:3 }}</td>
                                            <td class="text-center">{{ monitor_obj.Lock_time_min|floatformat:3 }}</td>
                                            <td class="text-center">{{ monitor_obj.Lock_time_max|floatformat:3}}</td>
                                        </tr>
                                    {% endfor %}
                                    </tbody>
                                </table>
                                <div id="TitleInfo" class='pop-box' style='min-height: 50px; max-height: 300px; overflow-y: hidden; overflow-x: auto; padding:5px; margin-right: 30px;margin-bottom: 30px;margin-top: auto;right: 30px;word-break: break-all;white-space: normal;'>
                                </div>
                            </div>
                    </div>
                </div>
            </form>
        </div>
</div>
<script>
    function change_info(){
        var args = $("#asset_form").serialize();
        window.location = "{% url 'mysql_slowlog' %}?" + args
    }

    function popupDiv(obj, msg,ids) {
        document.getElementById(ids).style.color="Black";
        document.getElementById(ids).style.background="GreenYellow";
        var offset = $(obj).offset();
        var html = "";

        if (msg != "") {

            //获取当前对象位置
            var x = offset.top;
            var y = offset.left;

            //添加div内容
            html += "<span style='color:white;'>" + msg + "</span>";
            $("#TitleInfo").html(html);
            //移动div位置
            var div_obj = $("#TitleInfo").show();
            div_obj.css({ "top": $(obj).prop("offsetHeight") + x-100, "left": $(obj).prop("offsetWidth") + y-200});

            $("#divCover").show();
        }
    }

    function popupDivOut(ids) {
        document.getElementById(ids).style.color="";
        document.getElementById(ids).style.background="";
        return false;
    }

</script>
<script type="text/javascript" src="/static/js/showmore.js"></script>

{% endblock %}